<template>
  <view class="addSendExpressContainer">
    <uni-forms modelValue="sendForm" ref="form" :rules="rules" validateTrigger="bind" :value="sendForm">
      <uni-forms-item label="寄件人" labelWidth="100px" name="sendName">
        <uni-easyinput type="text" v-model="sendForm.sendName" primaryColor="#ff84b4"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item label="收件省市区" name="sendProvince" labelWidth="100px">
        <uni-easyinput type="text" placeholder="点击选择地址" @focus="cityChange" v-model="sendForm.sendProvince"
          primaryColor="#ff84b4">
        </uni-easyinput>
        <cityPicker :defaultValue="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm" @cancel="cancel"
          :visible="visible" />
      </uni-forms-item>
      <uni-forms-item label="详细地址" labelWidth="100px" name="sendDescription">
        <uni-easyinput type="text" placeholder="请输入详细地址" v-model="sendForm.sendDescription" primaryColor="#ff84b4">
        </uni-easyinput>
      </uni-forms-item>
      <uni-forms-item label="收件人" labelWidth="100px" name="sendToName">
        <uni-easyinput type="text" v-model="sendForm.sendToName" primaryColor="#ff84b4"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item label="收件人电话" labelWidth="100px" name="sendToMobile">
        <uni-easyinput type="number" v-model="sendForm.sendToMobile" primaryColor="#ff84b4"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item label="寄件内容" labelWidth="100px" name="sendContent">
        <uni-easyinput type="text" v-model="sendForm.sendContent" primaryColor="#ff84b4"></uni-easyinput>
      </uni-forms-item>
      <button type="primary" @click="addSendExpress">新增寄件单</button>
    </uni-forms>
  </view>
</template>

<script>
  import cityPicker from '../../../components/piaoyi-cityPicker/pioayi-cityPicker.vue'
  export default {
    data() {
      return {
        sendForm: {
          sendId: '',
          sendName: '',
          sendToName: '',
          sendAddress: '',
          sendToMobile: '',
          sendContent: '',
          sendStatus: '',
          sendCreateTime: '',
          sendPay: '',
          userId: '',
          sendProvince: '',
          sendDescription: '',
        },
        visible: false,
        maskCloseAble: true,
        str: '',
        defaultValue: '',
        // 表单校验
        rules: {
          sendName: {
            rules: [{
              required: true,
              errorMessage: '请填写寄件人',
            }]
          },
          sendProvince: {
            rules: [{
              required: true,
              errorMessage: '请填写收件的省市区',
            }]
          },
          sendDescription: {
            rules: [{
              required: true,
              errorMessage: '请填写收件的详细信息',
            }]
          },
          sendToName: {
            rules: [{
              required: true,
              errorMessage: '请填写收件人',
            }]
          },
          sendToMobile: {
            rules: [{
              required: true,
              errorMessage: '请填写收件人电话',
            },{
              minLength: 11,
              maxLength: 11,
              errorMessage: '手机号应该在11位'
            }]
          },
          sendContent: {
            rules: [{
              required: true,
              errorMessage: '请填写寄件内容',
            }]
          }
        },
      }
    },
    components: {
      cityPicker
    },
    methods: {
      confirm(val) {
        console.log(val)
        this.sendForm.sendProvince = val.name;
        this.visible = false
        console.log(this.sendForm);
      },
      cancel() {
        this.visible = false
      },
      // 城市选择
      cityChange() {
        this.visible = true;
      },
      // 点击新增寄件单按钮
      addSendExpress() {
        var _this = this;
        this.$refs.form.validate().then(res => {
          _this.$http.post('/api/send/addSendForUser',{
            sendContent: _this.sendForm.sendContent,
            sendDescription: _this.sendForm.sendDescription,
            sendName: _this.sendForm.sendName,
            sendProvince: _this.sendForm.sendProvince,
            sendToMobile: _this.sendForm.sendToMobile,
            sendToName: _this.sendForm.sendToName
          }).then((res) => {
            if(res.data.code == 200){
              uni.showToast({
                title: '寄件单创建成功',
                duration: 2000
              });
              setTimeout(function() {
                uni.navigateBack();
              }, 2000);
            }else {
              uni.showToast({
                title: '服务器错误，订单创建失败请稍后重试',
                duration: 2000
              })
            }
          })

        }).catch(err => {
          console.log('表单错误信息：', err);
          uni.showToast({ 
            title: '提交失败',
            icon: 'none', //如果要纯文本，不要icon，将值设为'none'
            duration: 2000 //持续时间为 2秒
          })
        })

      }

    }
  }
</script>

<style>
  .addSendExpressContainer {
    padding: 50rpx;
  }
</style>
